# output.distPath

- **Type:**

```ts
type DistPathConfig = {
  root?: string;
  html?: string;
  js?: string;
  jsAsync?: string;
  css?: string;
  cssAsync?: string;
  svg?: string;
  font?: string;
  wasm?: string;
  image?: string;
  media?: string;
  assets?: string;
};
```

- **Default:**

```js
const defaultDistPath = {
  root: 'dist',
  html: './',
  js: output.target === 'node' ? '' : 'static/js',
  jsAsync: output.target === 'node' ? '' : 'static/js/async',
  css: 'static/css',
  cssAsync: 'static/css/async',
  svg: 'static/svg',
  font: 'static/font',
  wasm: 'static/wasm',
  image: 'static/image',
  media: 'static/media',
  assets: 'static/assets',
};
```

Set the directory of the output files. Rsbuild will emit files to the specified subdirectory according to the file type.

> See [Output files](/guide/basic/output-files) for more information.

## File types

`output.distPath` can be set differently for different file types.

Here are the details of each `output.distPath` option:

- `root`: The root directory of all output files.
- `html`: The output directory of HTML files.
- `js`: The output directory of JavaScript files.
- `jsAsync`: The output directory of async JavaScript files, which by default will be output to the `async` subdirectory of `distPath.js`.
- `css`: The output directory of CSS style files.
- `cssAsync`: The output directory of async CSS files, which by default will be output to the `async` subdirectory of `distPath.css`.
- `svg`: The output directory of SVG images.
- `font`: The output directory of font files.
- `wasm`: The output directory of WebAssembly files.
- `image`: The output directory of non-SVG images.
- `media`: The output directory of media assets, such as videos.
- `assets`: The output directory of other static assets. Such as the assets defined in [Extend Asset Types](/guide/basic/static-assets#extend-asset-types).

## Root directory

The `root` is the root directory of the build artifacts and can be specified as a relative or absolute path. If the value of `root` is a relative path, it will be appended to the project's root directory to form an absolute path.

Other directories can only be specified as relative paths and will be output relative to the `root` directory.

## Example

The JavaScript files will be output to the `distPath.root` + `distPath.js` directory, which is `dist/static/js`.

To output JavaScript files to the `build/resource/js` directory, add the following config:

```ts title="rsbuild.config.ts"
export default {
  output: {
    distPath: {
      root: 'build',
      js: 'resource/js',
    },
  },
};
```

The above config will generate the following directory structure:

```bash
build
├── resource
│   └── js
│       └── index.js
└── index.html
```
